<template>
    <div>
    <!-- <a-modal v-model="visible" title="管理员账号" width="1000px" :footer="null">
        <a-button type="danger" v-action:enterpriseAddOperateBtn @click="openAdmin" icon="plus">新增管理员</a-button>
        <a-table :columns="columns" rowKey="id" :data-source="loadData">
             <span slot="action" slot-scope="text, record">
                 <a-popconfirm
                    title="确认删除?"
                    ok-text="确认"
                    cancel-text="取消"
                    @confirm="remove(record)" >
                    <a href="#" v-action:enterpriseDelOperateBtn>删除</a>
                </a-popconfirm>
             </span>
        </a-table>
    </a-modal> -->
    <a-modal v-model="visibleOther" title="分配管理员" :width="1200" ok-text="确认" cancel-text="取消" @ok="addFormSubmit">
        <!-- <a-select v-model="userId" style="width: 100%;">
            <a-select-option v-for="user in userData" :key="user.userId">
                {{ user.userName }}
            </a-select-option>
        </a-select> -->
        <a-transfer :data-source="mockData" :titles="['待选列表', '已选列表']" :target-keys="targetKeys"
          :selected-keys="selectedKeys" show-search :filter-option="(inputValue, item) => item.loginNamel.indexOf(inputValue) !== -1" :show-select-all="false" @change="handleChange" @selectChange="handleSelectChange">
          <template slot="children" slot-scope="{
                    props: { direction, filteredItems, selectedKeys, disabled: listDisabled },
                    on: { itemSelectAll, itemSelect },
                  }">
            <a-table :row-selection="getRowSelection({ disabled: listDisabled, selectedKeys, itemSelectAll, itemSelect })" :pagination="false" :scroll="{y: 400}"
              :columns="[{dataIndex: 'loginNamel',title: '账号'},{dataIndex: 'userName',title: '姓名'}]"
              :data-source="filteredItems" size="small" :style="{ pointerEvents: listDisabled ? 'none' : null }"
              :custom-row="({ key, disabled: itemDisabled }) => ({on: {click: () => {if (itemDisabled || listDisabled) return;itemSelect(key, !selectedKeys.includes(key));},},})" />
          </template>
        </a-transfer>
    </a-modal>
     </div>
</template>

<script>
import store from '@/store'
import { sysApplyAdminToEnterprise,sysEnterpriseAdminClose } from '@/api/manage/enterprise'
import { sysGetOperateEnableToIsDelUser } from '@/api/manage/user'
import difference from 'lodash/difference';
const columns = [
    {
        title: '管理员名称',
        dataIndex: 'userName'
    },
    {
        title: '操作',
        key: 'action',
        scopedSlots: { customRender: 'action' },
    }
]
export default {
  name: 'sysAdminList',
  data(){
    // const mockData = [];
    // const originTargetKeys = mockData.filter(item => +item.key % 3 > 1).map(item => item.key)
    return {
      mockData: [],
      targetKeys: [],
      selectedKeys: [],
      
      visible:false,
      visibleOther:false,
      enterpriseId:'',
      userData:[],
      userId:'',
      userIds: [],
      columns,
      loadData:[]
    }
  },
  mounted(){

  },
  methods: {
    handleChange(nextTargetKeys, direction, moveKeys) {
      this.targetKeys = nextTargetKeys;
    
      // console.log('targetKeys: ', nextTargetKeys);
      // console.log('direction: ', direction);
      // console.log('moveKeys: ', moveKeys);
    },
    handleSelectChange(sourceSelectedKeys, targetSelectedKeys) {
      this.selectedKeys = [...sourceSelectedKeys, ...targetSelectedKeys];
      this.userIds = targetSelectedKeys;
      // console.log('sourceSelectedKeys: ', sourceSelectedKeys);
      // console.log('targetSelectedKeys: ', targetSelectedKeys);
    },
    getRowSelection({
      disabled,
      selectedKeys,
      itemSelectAll,
      itemSelect
    }) {
      return {
        getCheckboxProps: item => ({
          props: {
            disabled: disabled || item.disabled
          }
        }),
        onSelectAll(selected, selectedRows) {
          const treeSelectedKeys = selectedRows
            .filter(item => !item.disabled)
            .map(({
              key
            }) => key);
          const diffKeys = selected ?
            difference(treeSelectedKeys, selectedKeys) :
            difference(selectedKeys, treeSelectedKeys);
          itemSelectAll(diffKeys, selected);
        },
        onSelect({
          key
        }, selected) {
          itemSelect(key, selected);
        },
        selectedRowKeys: selectedKeys,
      };
    },
    async add(rows){
        this.enterpriseId = rows.enterpriseId;
        this.loadTable();
        this.visible = true;
    },
    async loadTable(){
        this.loadData = await store.dispatch('sysEnterpriseIdAdminList',this.enterpriseId);
    },
    async openAdmin(rows) {
      this.enterpriseId = rows.enterpriseId;
      this.userId = '';
      this.mockData = [];
      this.userIds = [];
      this.selectedKeys = [];
      this.targetKeys = [];
      
      const {code,data} = await sysGetOperateEnableToIsDelUser(this.enterpriseId);
      let noUserData = data.noChooseUsers,userData = data.chooseUsers;
      noUserData.forEach(item=> {
        let disabled = false
        if (userData.length > 0) {
          userData.forEach(userItem=> {
            if (item.userId == userItem.userId) {
              this.targetKeys.push(item.userId)
              this.selectedKeys.push(item.userId)
            }
          })
        }
        this.mockData.push({
          key: item.userId,
          loginNamel: item.loginNamel,
          userName: item.userName,
          disabled
        });
      })
      this.visibleOther = true;
    },
    async remove(rows){
       const {code} = await sysEnterpriseAdminClose({id:rows.id});
       if(code === '1'){
            this.$message.success('操作成功');
            this.loadTable();
       }
    },
    async addFormSubmit(){
        let params = {};
        if (this.userIds.length == 0) {
          return this.$message.warning('请选择(已选列表)管理员');
        }
        params.enterpriseId = this.enterpriseId;
        params.userIds = this.userIds;
        const {code} = await sysApplyAdminToEnterprise(params);
        if(code === '1'){
            this.visibleOther = false;
            this.loadTable();
        }
    }
  }
}
</script>

